<template>
  <view class="container">    
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-container">
        <image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
      </view>
      <view class="user-details">
        <view class="user-name">{{ userInfo.nickName || '用户昵称' }}</view>
        <view class="user-level">普通会员</view>
      </view>
    </view>
    
    <!-- 服务分类 -->
    <view class="service-categories">
      <view class="category-title">服务分类</view>
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in categories" :key="index">
          <view class="category-icon">
            <text :class="['iconfont', item.icon]"></text>
          </view>
          <view class="category-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    
    <!-- 推荐服务 -->
    <view class="recommended-services">
      <view class="section-title">推荐服务</view>
      <view class="service-list">
        <view class="service-card" v-for="(item, index) in recommendedServices" :key="index">
          <image class="service-image" :src="item.image" mode="aspectFill"></image>
          <view class="service-info">
            <view class="service-name">{{ item.name }}</view>
            <view class="service-price">¥{{ item.price }} <text class="price-unit">起</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'

export default {
  data() {
    return {
      userInfo: {},
      categories: [
        { name: '保洁服务', icon: 'icon-clean' },
        { name: '厨房烹饪', icon: 'icon-chef' },
        { name: '家庭护理', icon: 'icon-care' },
        { name: '母婴照料', icon: 'icon-care' }
      ],
      recommendedServices: [
        { 
          name: '日常保洁 4小时', 
          price: 199, 
          image: '/static/service1.jpg' 
        },
        { 
          name: '厨房深度清洁', 
          price: 299, 
          image: '/static/service2.jpg' 
        },
        { 
          name: '新居开荒保洁', 
          price: 599, 
          image: '/static/service3.jpg' 
        }
      ]
    }
  },
  
  onLoad() {
    this.getUserInfo()
  },
  
  methods: {
    getUserInfo() {
      const userStore = useUserStore()
      if (userStore.userInfo) {
        this.userInfo = userStore.userInfo
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 导航栏 */
.navbar {
  height: 44px;
  background-color: #07c160;
  padding-top: var(--status-bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  padding: 20px;
  background-color: #07c160;
  color: #ffffff;
  align-items: center;
}

.avatar-container {
  margin-right: 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.user-name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-level {
  font-size: 14px;
  opacity: 0.8;
}

/* 服务分类 */
.service-categories {
  margin: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
}

.category-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.category-icon {
  width: 50px;
  height: 50px;
  background-color: #f0f9f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.category-icon .iconfont {
  font-size: 24px;
  color: #07c160;
}

.category-name {
  font-size: 12px;
  color: #333;
}

/* 推荐服务 */
.recommended-services {
  margin: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.service-list {
  display: flex;
  flex-direction: column;
}

.service-card {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 15px;
}

.service-card:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.service-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  margin-right: 12px;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.service-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.price-unit {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}
</style>